<template>
   <div id="activePage" class="view">
     <div class="hea_img">
       <img src="../../../static/img/act.png" alt="">
     </div>
     <el-collapse v-model="activeName" accordion>
       <div v-for="item in activeList">

       <el-collapse-item v-if="item.status == 3"  :name="item.id" :key="item.id">
         <template slot="title">
           <div class="active_sec flex">
             <div style="width: 650px">
               <img style="width: 100%;height: 100%;" src="http://www.hsyl188.com/help/picture/a_1.png" alt="">
             </div>

             <div style="padding-left: 30px;text-align: left;flex: 1;overflow: hidden">
               <div class="item" style="color:#ee7537;font-size: 20px">新会员注册下载APP送18元</div>
               <ul class="item">
                 <li>活动对象：所有新注册会员</li>
                 <li>活动内容：<span  class="single_ellipsis">{{item.content}}</span></li>
               </ul>
             </div>
           </div>
         </template>
         {{item.content}}
       </el-collapse-item>
       </div>
     </el-collapse>
   </div>
</template>

<script>
  export default {
    data () {
      return {
        activeName: '1',
        page: {
          pageSize: 10,
          pageNumber: 1
        },
        activeList: [],
        activeLoading: undefined
      }
    },
    created () {
        this.getActiveList()
    },
    methods: {
      getActiveList () {
//        this.$loading.service({ fullscreen: true })
        this.$api.getActiveList(this.page).then(res => {
          if (res.code === '000000') {
            this.activeList = res.data.list
          }
        })
      }
    }

  }
</script>

<style lang="less">
#activePage{
  .hea_img{
    padding:40px 40px 12px 0;
    text-align: left;
  }
.active_sec{
  height:160px;
  border: 1px solid #ccc;
  padding:15px 9px;
  img{
    width: 100%;
    height:100%;
  }
  .item li{
    line-height:20px;
    list-style: disc;
  }
}
  .el-collapse-item__header{
    height:160px;
    margin-bottom: 20px;
  }
  .el-collapse-item__arrow{
    display: none;
  }
}
</style>
